<template>
  <div>
    <Button   type="primary" @click="longdao = true" >添加</Button>
    <Drawer
        title="添加漏洞信息"
        v-model="longdao"
        width="700"
        :mask-closable="true"
        :styles="styles"
        @on-close="handleClose">
      <Form  ref="myForm" :model="formData"  :rules="ruleValidate">
        <Row :gutter="32">
          <Col span="12">
            <FormItem label="漏洞名称" label-position="top"  prop="Vname">
              <Input v-model="formData.Vname" placeholder="输入漏洞名称" />
            </FormItem>
          </Col>
          <Col span="12">
            <FormItem label="已修复" label-position="top" prop="Repaird">
              <Input disabled v-model="formData.Repaird" placeholder="已修复服务数量" />
            </FormItem>
          </Col>
        </Row>
        <Row :gutter="32">
          <Col span="12">
            <FormItem label="未修复" label-position="top" prop="UnRepaird">
              <Input disabled v-model="formData.UnRepaird" placeholder="未修复服务数量" />
            </FormItem>
          </Col>
          <Col span="12">
            <FormItem label="紧急程度" label-position="top" prop="Warn">
              <Select   v-model="formData.Warn" placeholder="选择紧急程度">
                <Option value="高">高</Option>
                <Option value="中">中</Option>
                <Option value="低">低</Option>
              </Select>
            </FormItem>
          </Col>
        </Row>
        <Row :gutter="32">
          <Col span="12">
            <FormItem label="修复完成时间" label-position="top" prop="Expected">
                <DatePicker  v-model="formData.Expected" placeholder="修复完成时间" type="date" format="yyyy-MM-dd"  style="width: 320px" />
            </FormItem>
          </Col>
        </Row>
      </Form>
      <div class="demo-drawer-footer">
        <Button style="margin-right: 8px" @click="longdao = false;" >取消</Button>
        <Button type="primary" @click="saveHostData">确定</Button>
      </div>
    </Drawer>
  </div>
</template>
<script>
import axios from "axios";
import moment from "moment";

export default {
  name: 'AddVulnerability',
  inject: ['reload'],
  data() {
    return {
      longdao: false, //控制抽屉的显示和隐藏
      company: this.$route.query.company, // 获取company参数

      styles: {
        height: 'calc(100% - 55px)',
        overflow: 'auto',
        paddingBottom: '53px',
        position: 'static'
      },
      formData: {
        Vname: '',
        Repaird: '0',
        UnRepaird: '0',
        Warn: '',
        Expected: '',
      },
      ruleValidate: {
        Vname: [{required: true, message: '漏洞名称不能为空', trigger: 'blur'}],
        Warn: [{required: true, message: '选择其中一项', trigger: 'blur'}],
        Expected: [{required: true, type: 'date' ,message: '请选择完成时间', trigger: 'change'}],
      }
    }
  },
  methods: {
    handleClose() {
      this.longdao = false; // 关闭抽屉
      this.$refs.myForm.resetFields(); // 重置表单数据
    },
    background(type) {
      this.$Message[type]({
        background: true,
        content: type === 'success' ? '添加成功' : '添加失败'
      });
    },
    saveHostData() {
      this.$refs['myForm'].validate((valid) => {
        if (valid) {
          this.formData.Expected = moment(this.formData.Expected).format('YYYY-MM-DD');
          axios.post(`http://172.30.53.223:8888/api/addability?company=${this.company}`, this.formData)
              .then(() => {
                // 数据保存成
                this.background('success');
                this.longdao = false;
                this.$refs.myForm.resetFields();
                this.reload()
              })
              .catch(error => {
                // 处理错误
                console.error(error);
                this.background('error');
              });
        } else {
          // 表单验证不通过的逻辑
          return; // 阻止提交操作
        }
      });
    },
  }
}
</script>
<style>
.demo-drawer-footer{
  width: 100%;
  position: absolute;
  bottom: 0;
  left: 0;
  border-top: 1px solid #e8e8e8;
  padding: 10px 16px;
  text-align: right;
  background: #fff;
}
</style>
